<template>
  <div id="_userInfo">

    <el-row class="demo-avatar demo-basic">
      <el-col :span="12">
        <div class="demo-basic--circle">
          <div class="block"><el-avatar :size="150" :src="header"></el-avatar></div>
        </div>
        <div class="nick-sign">
          <div class="nickname">
            <span>{{nickname}}</span><br>
          </div>
          <div class="sign">
            {{sign}}
          </div><br>
          <el-button icon="el-icon-edit"  @click="edit">编辑</el-button>
        </div>
        <div class="user_num">
          <div style="cursor: pointer" >
            <div class="num_number">{{attendCount}}</div>
            <span class="num_text">粉丝</span>
          </div>
          <div style="cursor: pointer" >
            <div class="num_number">{{ fansCount }}</div>
            <span class="num_text">关注</span>
          </div>
          <div style="cursor: pointer" >
            <div class="num_number">{{ integration }}</div>
            <span class="num_text">个人积分</span>
          </div>
        </div>
        <div >
          <el-card class="center">
            <el-descriptions class="margin-top" title="个人信息" :column="2" border>
<!--              <template slot="extra">-->
<!--                <el-button type="primary" v-if="$route.params.id==$store.state.id" size="small">操作</el-button>-->
<!--              </template>-->
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-picture-outline"></i>
                  头像
                </template>
                <div class="block"><el-avatar shape="square" :size="90" :src="header"></el-avatar></div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  账户名
                </template>
                {{ username }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-s-custom"></i>
                  昵称
                </template>
                {{ nickname }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-odometer"></i>
                  累计消费金额
                </template>
                {{ consumeAmount }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-male"></i>
                  <i class="el-icon-female"></i>
                  性别
                </template>
                <el-tag size="small">{{ gender }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-message"></i>
                  邮箱Email
                </template>
                {{ email }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号码
                </template>
                {{ mobile }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                  地区
                </template>
                {{ city }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  职业
                </template>
                {{ job }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-basketball"></i>
                  生日
                </template>
                {{ birth |  dataFormat }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-magic-stick"></i>
                  个性签名
                </template>
                {{ sign }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-date"></i>
                  注册日期
                </template>
                {{ createTime |  dataFormat }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
      </el-col>
    </el-row>
  <updateMember :showLog="showLog" :flesh.sync="showLog" @initList="query"/>

  </div>

</template>

<script>
import axios from "axios";
import updateMember from "@/pages/Center/userInformation/updateMember.vue";
import {zip} from "lodash/array";

export default {
  name: 'inforformation',
  components:{updateMember},
  data() {
    return {
      showLog:false,
      id: '',
      username: '',
      password: '',
      nickname: '',
      mobile: '',
      email: '',
      header: '',
      gender: '',
      birth: '',
      city: '',
      job: '',
      sign: '',
      integration: '',
      createTime: '',
      consumeAmount:'',
      attendCount:'0',
      fansCount:'0',

    }
  },
  methods:{
    edit(){
      this.showLog = true;

    },
    queryMember(){
      axios({
        url:'/member/queryMember',
        method:'get'
      }).then(response =>{
        if (response.code == 200){
          console.log(response)
          this.username=response.data.username
          this.nickname = response.data.nickname
          this.mobile=response.data.mobile
          this.email = response.data.email
          this.header = response.data.header
          this.gender = response.data.gender
          this.birth = response.data.birth
          this.job = response.data.job
          this.city = response.data.city
          this.sign=response.data.sign
          this.integration = response.data.integration
          this.createTime = response.data.createTime
        }
      })
    },
    queryConsumerAmount(){
      axios({
        url:'/member/queryConsumerAmount',
        method:'get',
      }).then(response =>{
        console.log(response)
        if (response.code==200){
          this.consumeAmount = response.data.consumeAmount
          if (response.data.attendCount==null){
            this.attendCount = 0
          }else {
            this.attendCount = response.data.attendCount
          }
          if (response.data.fansCount == null){
            this.fansCount = 0
          }else {
            this.fansCount=response.data.fansCount
          }
        }
      })
    },
    query(){
      this.queryMember()
      this.queryConsumerAmount()
    }
  },
  created() {
   this.query()
  }
}
</script>

<style scoped>
#_userInfo{
 position: relative;
  top: -1230px;
  left: 75px;
}
.center{
  position: relative;
  top: -60px;
  left: 50px;
  width: 1000px;
  height: 500px;
}
.user_num {
  position: relative;
  left: 750px;
  top: -200px;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
}

.user_num > div {
  text-align: center;
  border-right: 1px dotted #999;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  line-height: 20px;
}
.demo-basic--circle{
  position: relative;
  left: 40px;
}
.nick-sign{
  position: relative;
  left: 230px;
  top: -130px;
}
.nickname{
  width: 60%;
  height: 100%;
  line-height: 30px;
  font-weight: bold;
  font-size: 20px
}
.sign{
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}
</style>